<script setup lang="ts">

import { defineProps, computed, defineEmits } from 'vue'
import { useStore } from 'vuex'
const store = useStore()
const emits = defineEmits(['update:modelValue'])
const props = defineProps<{
    modelValue: boolean
}>()

let scrollTop = computed(() => {
    console.log(store.getters.scrollTop);
    return store.getters.scrollTop
})

const handleClose = () => {
    emits('update:modelValue')
}
</script>

<template>
    <div class="mask flex-start-start" v-if="modelValue" :style="{top:scrollTop  + 'px'}">
        <div class="mask-close flex-end-row">
            <el-icon @click="handleClose" class="close-btn">
                <Close />
            </el-icon>
        </div>
        <slot></slot>
    </div>
</template>

<style scoped lang="scss">
:deep(.el-timeline-item__content) {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.mask {
    width: 100%;
    height: 100%;
    background-color: rgba($color: #ffffff, $alpha: 0.9);
    padding: 120px 20px 20px 230px;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 300;
    overflow-y: scroll;
}
.mask-close {
    width: 83%;
    position: absolute;
    z-index: 20;
}

.close-btn:hover {
    color: white;
    background: #409eff;
}
</style>